<template>
<!--温馨提示组件-->
<div class="tips-box" v-if="isTipsShow">
  <!-- 不私加号码  提示 -->
  <div class="contect-box" v-if="MobileTip">
    <p class="title">温馨提示</p>
    <div class="contect-text">
      <p class="text">尊敬的客户，我们不会在直播期间及聊天区公布任何与投资顾问有关的联系方式，包括但不限于微信、QQ、电话号码等，骗子广告猖獗，谨防上当受骗！</p>
    </div>
    <div class="footer-btn" @click="confirmMobileTip">
      确定
    </div>
  </div>
  <!-- 开通资金账号 提示 -->
  <div class="contect-box" v-if="accountTipShow">
    <div class="close" @click='close'><i class="iconfont icon-cc-close"></i></div>
    <p class="title">温馨提示</p>
    <div class="contect-text">
      <p class="text">尊敬的客户,本视频为专业类视频，请前往开户后观看。</p>
    </div>
    <div class="footer-btn2" @click="confirmaccountTip">
      3分钟极速开户
    </div>
  </div>
  <!-- 白名单 提示 -->
  <div class="contect-box" v-if="whiteList">
    <div class="close" @click='close'><i class="iconfont icon-cc-close"></i></div>
    <p class="title">温馨提示</p>
    <div class="contect-text white">
      <p class="text">尊敬的客户,本视频为专业白名单类视频，请联系客服开通白名单权限。</p>
    </div>
    <div class="service">
      <div class="ser-box">
        <div class="phone-img">
          <img src="../../assets/images/zyzq/phone.png"/>
        </div>
        <div class="ser-text">
          客服电话：400-620-8888
        </div>
      </div>
      <div class="ser-box">
        <div class="phone-img">
          <img src="../../assets/images/zyzq/girl.png"/>
        </div>
        <div class="ser-text">
          在线客服：APP首页-我的-在线客服
        </div>
      </div>
    </div>
    <div class="footer-btn2" @click="close">
     我知道了
    </div>
  </div>
  <!-- 投顾签约  提示 -->
  <div class="contect-box" v-if="consultant">
    <div class="close" @click='close'><i class="iconfont icon-cc-close"></i></div>
    <p class="title">温馨提示</p>
    <div class="contect-text">
      <p class="text">请点击下方按钮，前往签约您需要的投顾，如未能查找到该投顾线上投顾签约信息，烦请拨打客服热线4006208888咨询线上投顾签约事宜。</p>
    </div>
    <p class="care">*若您已申请签约，也可点击按钮查看审核状态。</p>
    <div class="footer-btn2" @click="confirmConsultant">
      前往签约
    </div>
  </div>
  <!-- 风险评估过期  提示 -->
  <div class="contect-box" v-if="riskOver">
    <div class="close" @click='close'><i class="iconfont icon-cc-close"></i></div>
    <p class="title">温馨提示</p>
    <div class="contect-text">
      <p class="text">尊敬的客户，您的风险评测问卷已过期，请点击下方按钮前往更新。</p>
    </div>
    <div class="footer-btn2" @click="confirmOverTip">
      前往更新
    </div>
  </div>
  <!-- 风险等级不够  提示 -->
  <div class="contect-box" v-if="riskLow">
    <div class="close" @click='close'><i class="iconfont icon-cc-close"></i></div>
    <p class="title">温馨提示</p>
    <div class="contect-text">
      <p class="text">尊敬的客户，本视频可能含有高于您的风险承受能力等级的产品，请确认您的风险承受能力等级满足要求后再进入。</p>
    </div>
    <div class="footer-btn2" @click="close">
      我知道了
    </div>
  </div>
</div>
</template>
<script>
  export default {
    components: {
    },
    data() {
      return {
        isTipsShow: true,
      }
    },
    computed: {
      MobileTip() {//私加号码
        return this.$store.state.isMobileTip
      },
      accountTipShow() {//资金账户类提示
        return this.$store.state.tipsShow.accountTipShow
      },
      consultant() {//投顾签约提示
        return this.$store.state.tipsShow.consultant
      },
      whiteList() {//白名单用户？
        return this.$store.state.tipsShow.whiteList
      },
      riskOver() {//风险评估过期 提示
        return this.$store.state.tipsShow.riskOver
      },
      riskLow() {//风险评估等级不够 提示
        return this.$store.state.tipsShow.riskLow
      },
    },
    mounted () {
    },
    destroyed () {
      this.$store.dispatch('setMobileTipFalse');
      this.$store.dispatch("accountTipShow", false);
      this.$store.dispatch("consultant", false);
      this.$store.dispatch("whiteList", false);
      this.$store.dispatch("riskOver", false);
      this.$store.dispatch("riskLow", false);
    },
    methods: {
      close() {//禁止 观看
        this.$router.go(-1)
      },
      // 前往资金账户类 开户
      confirmaccountTip() {
        window.MyWebView.tzt_hsCallNativeFunctionFromWeb("reqaction", "{\"action\":\"10048\"}")
      },
      // 前往 投顾签约
      confirmConsultant() {
        window.MyWebView.tzt_hsCallNativeFunctionFromWeb("reqaction", "{\"action\":\"10061\",\"loginType\":\"1\",\"loginKind\":\"1\",\"secondtype\":\"0\",\"fullscreen\":\"1\",\"url\":\"/redmall/html/IntelligentBoci/emInteraction_index.html\"}")
      },
      confirmOverTip() {// 更新 风险测评
        window.MyWebView.tzt_hsCallNativeFunctionFromWeb("reqaction", "{\"action\":\"10061\",\"loginType\":\"1\",\"loginKind\":\"1\",\"secondtype\":\"0\",\"fullscreen\":\"1\",\"url\":\"/redmall/html/emuc_riskLevel.html\"}")
      },
      // 已阅读不私加号码提示
      confirmMobileTip() {
        this.$http('/zb/live/zy/readMobileTip').then(
          res => {
            if (res.data.code == "000000") {
              this.isTipsShow = false
              this.$store.dispatch("setMobileTipFalse")
              this.$store.dispatch("setTipCom", null)
            } else {
              
            }
          },
          err => {
            console.log(err)
          }
        )
      }
    },
  };
</script>
<style scoped>
.tips-box {
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.4);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1004;
  display: flex;
  justify-content: center;
  align-items: center;
}

.contect-box {
  width: 608px;
  background: white;
  border-radius: 20px;
  position: relative;
}

.title {
  font-size: 30px;
  font-weight: 500;
  color:rgba(52,52,52,1);
  text-align: center;
  margin: 48px 0 44px 0;
}

.contect-text {
  width:524px;
  font-size:24px;
  font-weight:400;
  color:rgba(52,52,52,1);
  line-height:40px;
  margin: 0 auto;
  padding: 0 20px 40px 20px;
}

.text {
  font-size:24px;
  font-weight:400;
}

.footer-btn {
  height: 80px;
  border-top: 2px solid rgba(236,236,236,1);
  font-size:34px;
  font-weight:400;
  color:rgba(235,60,60,1);
  display: flex;
  align-items: center;
  justify-content: center;
}

 .close {
   position: absolute;
   top: 32px;
   right: 30px;
 }

.iconfont.icon-cc-close {
  display: block;
  width: 24px;
  height: 24px;
  color: #959595;
}

.footer-btn2 {
  width:421px;
  height:79px;
  background:linear-gradient(82deg,rgba(235,60,60,1) 0%,rgba(196,30,30,1) 100%);
  box-shadow:8px 10px 21px 0px rgba(255, 158, 158, 0.35);
  border-radius: 40px;
  font-size:34px;
  font-weight:500;
  color:rgba(255,255,255,1);
  margin: 0 auto;
  margin-bottom: 53px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.contect-text.white {
  padding-bottom: 20px;
}

.service {
  width: 504px;
  border-top: 1px solid rgba(236,236,236,1);
  padding: 20px 0;
  margin: 0 auto;
}

.ser-box {
  display: flex;
  align-items: center;
}

.ser-box:nth-child(1) {
  margin-bottom: 10px;
}

.phone-img {
  margin-right: 10px;
}

.phone-img img {
  display: block;
  width: 38px;
  height: 39px;
}

.ser-text {
  font-size:26px;
  font-weight:400;
  color:rgba(134,133,133,1);
}

.care {
  width: 524px;
  padding: 0 20px 20px;
  margin: 0 auto;
  font-size:20px;
  font-weight:400;
  color:rgba(235,60,60,1);
}
</style>